<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>投诉</title>
  <link rel="stylesheet" href="./weui.min.css">
  <style>
      .weui-uploader__bd img{
        float: left;
        margin-right: 9px;
        margin-bottom:9px;
        width: 79px;
        height: 79px;
      }
  </style>
</head>
<body>
    <div class="weui-toptips weui-toptips_warn js_tooltips describe">请输入投诉描述</div>
    <div class="weui-toptips weui-toptips_warn js_tooltips busy">系统繁忙，请稍后再试</div>
    <div id="app"></div>
    <script type="text/html" id="index">
        <div class="weui-cells__title">请选择投诉原因</div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="#cheat">
                <div class="weui-cell__bd">
                    <p>欺诈</p>
                </div>
                <div class="weui-cell__ft">
                </div>
                
            </a>
            <a class="weui-cell weui-cell_access" href="#content">
                <div class="weui-cell__bd">
                    <p>色情</p>
                </div>
            </a>
            <a class="weui-cell weui-cell_access" href="#induce">
                <div class="weui-cell__bd">
                    <p>诱导行为</p>
                </div>
                <div class="weui-cell__ft">
                </div>
                
            </a>
            <a class="weui-cell weui-cell_access" href="#infor">
                <div class="weui-cell__bd">
                    <p>不实信息</p>
                </div>
                <div class="weui-cell__ft">
                </div>
                
            </a>
            <a class="weui-cell weui-cell_access" href="#content">
                <div class="weui-cell__bd">
                    <p>违法犯罪</p>
                </div>
            </a>
            <a class="weui-cell weui-cell_access" href="#content">
                <div class="weui-cell__bd">
                    <p>骚扰</p>
                </div>
            </a>
            <a class="weui-cell weui-cell_access" href="#copy">
                <div class="weui-cell__bd">
                    <p>内容未经授权/滥用原创</p>
                </div>
                <div class="weui-cell__ft">
                </div>
                
            </a>
            <a class="weui-cell weui-cell_access" href="#content">
                <div class="weui-cell__bd">
                    <p>其他</p>
                </div>
            </a>
        </div>
        <div class="weui-cells__title">个人/企业等民事主体被诽谤侮辱、人身权或知识产权等被侵犯请选择“侵权”投诉。</div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="https://mp.weixin.qq.com/mp/readtemplate?t=complain/msg_tmpl&devicetype=android-26&version=26070336&lang=zh_CN&nettype=WIFI&ascene=0&pass_ticket=MfFt%2Bc5JpoJPOaB5ggrt5EOuvTCYyDuRWGg35EEnTbw%3D&wx_header=1">
                <div class="weui-cell__bd">
                    <p>侵犯（冒充他人、侵犯名誉等）</p>
                </div>
            </a>
        </div>
    </script>
    <script type="text/html" id="cheat" >
        <div>
            <div class="weui-cells__title">请选择投诉原因</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>多级分销</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>网络借贷</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>兼职赚钱</p>
                    </div>  
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>高额返利</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>相亲交友</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>虚假活动</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>高收益理财</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>微盘微交易</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content-money">
                    <div class="weui-cell__bd">
                        <p>不在以上类型中</p>
                    </div>
                </a>
            </div>
        </div>
    </script>
    <script type="text/html" id="induce">
        <div>
            <div class="weui-cells__title">请选择投诉原因</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#content">
                    <div class="weui-cell__bd">
                        <p>诱导分享</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content">
                    <div class="weui-cell__bd">
                        <p>诱导关注</p>
                    </div>
                </a>
            </div>
        </div>
    </script>
    <script type="text/html" id="infor">
        <div>
            <div class="weui-cells__title">请选择投诉原因</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#content">
                    <div class="weui-cell__bd">
                        <p>政治类不实信息</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content">
                    <div class="weui-cell__bd">
                        <p>医疗健康类不实信息</p>
                    </div>
                </a>
                <a class="weui-cell weui-cell_access" href="#content">
                    <div class="weui-cell__bd">
                        <p>社会实践类不实信息</p>
                    </div>
                </a>
            </div>
            <div class="weui-cells__title">个人/企业等民事主体被诽谤侮辱、人身权或知识产权等被侵犯请选择“侵权”投诉。</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="https://mp.weixin.qq.com/mp/readtemplate?t=complain/msg_tmpl&devicetype=android-26&version=26070336&lang=zh_CN&nettype=WIFI&ascene=0&pass_ticket=MfFt%2Bc5JpoJPOaB5ggrt5EOuvTCYyDuRWGg35EEnTbw%3D&wx_header=1">
                    <div class="weui-cell__bd">
                        <p>侵犯（冒充他人、侵犯名誉等）</p>
                    </div>
                </a>
            </div>
        </div>
    </script>
    <script type="text/html" id="copy">
        <div>
            <div class="weui-cells__title">请选择投诉原因</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#copy-content">
                    <div class="weui-cell__bd">
                        <p>抄袭</p>
                    </div>
                </a>
            </div>
            <div class="weui-cells__tips">非公众平台链接的内容被抄袭，请前往公众平台电脑端提交“侵权投诉”。</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#abuse">
                    <div class="weui-cell__bd">
                        <p>滥用原创 <span style="font-size:13px;color: #888;">整合信息、公共内容、营销宣传等</span>
                        </p>
                    </div>
                </a>
            </div>
            <div class="weui-cells__tips">抄袭他人内容且违规标原创，仅需投诉“抄袭”即可，平台会合并处理。</div>
        </div>
    </script>
    <script type="text/html" id="content-money">
        <div>
            <div class="weui-gallery" id="gallery">
                <span class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
            </div>
            <div class="weui-cells__title">投诉内容</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#index">
                    <div class="weui-cell__bd">
                        <p>标题</p>
                    </div>
                    <img src="./2.png" alt="" width="75" height="62">
                </a>
            </div>
            <div class="weui-cells__title">投诉描述</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="请输入投诉内容" rows="3" maxlength="200"></textarea>
                        <div class="weui-textarea-counter"><span class="number"></span>/200</div>
                    </div> 
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title">证据截图<span style="font-size: 13px;color: #888;">（点击上方投诉内容进去截图）</span></p>
                                <div class="weui-uploader__info"><span class="num"></span>/4</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <div class="weui-uploader__files" id="uploaderFiles">
                                </div>
                                <div class="weui-uploader__input-box in">
                                    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell-hd">
                        <label class="weui-label">损失金额</label>
                    </div>
                    <div class="weui-cell-bd">
                        <input class="weui-input" type="text" placeholder="选填"/>
                    </div>
                    <p style="color: #b2b2b2;">元</p>
                </div>
            </div>
            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:;">提交</a>
            </div>
        </div>
    </script>
    <script type="text/html" id="content">
        <div>
            <div class="weui-gallery" id="gallery">
                <span class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
            </div>
            <div class="weui-cells__title">投诉内容</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#index">
                    <div class="weui-cell__bd">
                        <p>标题</p>
                    </div>
                    <img src="./2.png" alt="" width="75" height="62">
                </a>
            </div>
            <div class="weui-cells__title">投诉描述</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="请输入投诉内容" rows="3" maxlength="200"></textarea>
                        <div class="weui-textarea-counter"><span class="number"></span>/200</div>
                    </div> 
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title">证据截图<span style="font-size: 13px;color: #888;">（点击上方投诉内容进去截图）</span></p>
                                <div class="weui-uploader__info"><span class="num"></span>/4</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <div class="weui-uploader__files" id="uploaderFiles">
                                </div>
                                <div class="weui-uploader__input-box in">
                                    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:;">提交</a>
            </div>
        </div>
    </script>
    <script type="text/html" id="copy-content">
        <div>
            <div class="weui-gallery" id="gallery">
                <span class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
            </div>
            <div class="weui-cells__title">投诉内容</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#index">
                    <div class="weui-cell__bd">
                        <p>标题</p>
                    </div>
                    <img src="./2.png" alt="" width="75" height="62">
                </a>
            </div>
            <div class="weui-cells__title">原创内容</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="text" placeholder="请输入原创内容链接"/>
                    </div>
                    <a class="weui-icon-info-circle" href="https://mp.weixin.qq.com/mp/readtemplate?t=complain/faq_get_url_compl_tmpl#wechat_redirect
                    "></a>
                </div>
            </div>
            <div class="weui-cells__title">投诉描述</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="请输入投诉内容" rows="3" maxlength="200"></textarea>
                        <div class="weui-textarea-counter"><span class="number"></span>/200</div>
                    </div> 
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title">证据截图</p>
                                <div class="weui-uploader__info"><span class="num"></span>/4</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <div class="weui-uploader__files" id="uploaderFiles">
                                </div>
                                <div class="weui-uploader__input-box in">
                                    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:;">提交</a>
            </div>
        </div>
    </script>
    <script type="text/html" id="abuse">
        <div>
            <div class="weui-gallery" id="gallery">
                <span class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
            </div>

            <div class="weui-cells__title">投诉内容</div>
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="#index">
                    <div class="weui-cell__bd">
                        <p>标题</p>
                    </div>
                    <img src="./2.png" alt="" width="75" height="62">
                </a>
            </div>
            <div class="weui-cells__title">投诉描述</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="请输入投诉内容" rows="3" maxlength="200"></textarea>
                        <div class="weui-textarea-counter"><span class="number"></span>/200</div>
                    </div> 
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title">证据截图</p>
                                <div class="weui-uploader__info"><span class="num"></span>/4</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <div class="weui-uploader__files" id="uploaderFiles">
                                </div>
                                <div class="weui-uploader__input-box in">
                                    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:;">提交</a>
            </div>
        </div>    
    </script>
    <script type="text/html" id="success">
        <div class="weui-msg">
            <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
            <div class="weui-msg__text-area">
                <h2 class="weui-msg__title">已提交</h2>
                <p class="weui-msg__desc">
                    你的投诉已提交审核，投诉单号：<span class="order"></span>。我们会在7个工作日内处理，感谢你对平台的支持。
                </p>
            </div>
            <div class="weui-msg__opr-area">
                <p class="weui-btn-area">
                    <a href="javascript:history.back();" class="weui-btn weui-btn_primary">确定</a>
                </p>
            </div>
        </div>
    </script>
    <script src="./jquery.min.js"></script>
    <script src="./router.js"></script>
    <script>
        
        var img_index = 1;
        function write(note) {
            $('#app').html($(note).html());
        }
        Router.route('cheat', function() {
            write('#cheat');
        });
        Router.route('induce', function() {
            write('#induce');
        });
        Router.route('infor', function() {
            write('#infor');
        });
        Router.route('copy', function() {
            write('#copy');
        });
        Router.route('index', function() {
            write('#index');
        });
        Router.route('content', function() {
            write('#content');
            details();
        });
        Router.route('content-money', function() {
            write('#content-money')
            details();
        })
        Router.route('copy-content', function() {
            write('#copy-content');
            details();
        });
        Router.route('abuse', function() {
            write('#abuse');
            details();
        });
        Router.route('success', function() {
            write('#success');
            random();
        })
        //投诉内容页
        function details() {
            $('.number').text('0');
            $('.num').text('0');
            $('.weui-textarea').keyup(function() {
                var i = $(this).val().length;
                $('.number').text(i);
                $('.weui-textarea-counter').css('color', '#b2b2b2');
            })          
            //上传图片 
            upload();
            //错误提示
            warn();
        };
        //图片计数
        function numImg() {
            var im = $('.weui-uploader__bd').find('img');
            var n = im.size();
            if(n >= 4) {
                $('.in').hide();
            }
            $('.num').text(n);
        };
        //生成随机数
        function random() {
            var j = '';
            for(i = 0;i < 9;i++) {
                j += Math.floor(Math.random()*10); 
            }
            $('.order').html(j);
        };
        //上传图片
        function upload() {
            var srcImg;
            $('#uploaderInput').change(function() {
                if(this.value == '') {
                    return false;
                }
                var filePath = $(this)[0].files[0];
                var reader = new FileReader();
                reader.onloadend = function(e) {
                    var img = new Image();
                    img.src = e.target.result;
                    img.id = "ig" + img_index++;
                    console.log(img.id);
                    $('#uploaderFiles').append(img);
                    numImg();
                }
                reader.readAsDataURL(filePath);
                //缩略图预览
                preview();
            });
        };
        //缩略图预览
        function preview() {
            $('#uploaderFiles').on("click", "img", function() {
                $('#galleryImg').attr("style", this.getAttribute("style"));
                $('#gallery').fadeIn(100);
                srcImg = $(this).prop('src');
                $('#galleryImg').css('backgroundImage', 'url('+srcImg+')');
                //退出预览
                $('#gallery').on("click", function() {
                    $('#gallery').fadeOut(100);
                });
                //删除图片
                $('.weui-icon_gallery-delete')
                    .attr('data-img', '#'+$(this).prop('id'))
                    .on('click', function() {
                        $($(this).attr('data-img')).remove();
                        numImg();
                    });
            });
        };
        //错误提示
        function warn() {
            $('.weui-btn').on('click', function() {
                if($('.weui-textarea').val().length == 0) {
                    $('.describe').css('display', 'block');
                    $('.weui-textarea-counter').css('color', '#e64340');
                    setTimeout(function() {
                        $('.describe').css('display', 'none');
                    },2000)
                }else if(navigator.onLine == false){
                    $('.busy').css('display', 'block');
                    setTimeout(function() {
                        $('.busy').css('display', 'none');
                    },2000);
                    $('.weui-btn').prepend('<i class="weui-loading"></i>');
                    setTimeout(function(){
                        $('.weui-loading').remove();
                    },100);
                }else{
                    $(this).prop('href', '#success');
                }
            });
        };

    </script>
</body>
</html>